<template>

<div>
    <div>
    </div>
    <div style="position: relative;
    width: 100%;
    padding: 12px 24px;
    margin-top: 10%;
    margin-left: 10%;
  ">
       <p style="font-size: 32px;    font-weight: 500;"> Hi~ 我是AI助手</p>
        <p style="font-size: 16px;
    font-style: normal;
    font-weight: 400;">{{AppDescription?AppDescription:'你身边的智能助手，可以为你答疑解惑、精读文档、尽情创作，让AI助手助你轻松工作，多点生活'}}</p>
        <div style="    width: 100%;
        height: 2px;border:1px dashed #e8e8e8"> </div>
    </div>
</div>
</template>

<script lang="tsx" setup>
interface Props {
    AppDescription?: string
  
}
const props = withDefaults(defineProps<Props>(), {  // 将 defineProps 的结果赋值给 props 变量
    AppDescription: '',

 
})
const hotSearchItems = [
    '① Text2SQL 文本转SQL 数据库查询',
    '② Echart图表增强且数据问答可视化',
    '③ Text2SQL与Echarts提供数据分析',
    '④ 结合Echarts和Text2SQL提升解读',
    '⑤ 基于大数据底座提升数据问答速度'
]
const headerTwoItems = [
    '① RAG模型优化问答系统流程',
    '② 向量技术提高数据检索效率',
    '③ 整合公网数据提升回答质量',
    '④ RAG框架实现精准通用问答',
    '⑤ 扩展方便对接三方开源系统'
]
const headerThreeItems = [
    '① 大模型解析文件实现智能问答',
    '② 统计学方法深入分析表格数据',
    '③ 表格数据结合大模型精准解读',
    '④ 支持更复杂表格计算增强统计',
    '⑤ 表格问答数据图表可视化展示'
]
</script>

<style scoped>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    background-color: #f6f7fb;
    /* background: linear-gradient(to right, #f1f0fe, #f3f2ff); */
    border-radius: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-top: 6%;
    justify-content: center;
    padding: 15px;
}
.header-text {
    text-align: left;
    flex-grow: 1;
}

.header-title {
    margin: 0; /* Remove default margin */
    font-size: 1.5em; /* Adjust as needed */
}

.header-subtitle {
    margin: 0; /* Remove default margin */
    font-size: 1em; /* Adjust as needed */
    margin-top: 3px; /* Add a small top margin for spacing between title and subtitle */
}

.header > div {
    text-align: left;
    flex-grow: 1;
}

.content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 10px;
}
.card-one {
    border-radius: 10px;
    padding: 20px;
    background: linear-gradient(to bottom, #f0effe, #d4eefc);
}
.card-two {
    border-radius: 10px;
    padding: 20px;
    background: linear-gradient(to right, #f0effe, #d4eefc);
}
.card-three {
    border-radius: 10px;
    padding: 20px;
    background: linear-gradient(to left, #f0effe, #d4eefc);
}
.card-subtitle {
    margin: 0; /* Remove default margin */
    font-size: 13px; /* Adjust as needed */
    color: #6c757d; /* Optional: to match the color of .header-subtitle */
}

.title {
    color: #333;
    font-size: 17px;
    margin-bottom: 5px;
}

.list-item {
    list-style-type: none;
    margin-bottom: 20px;
    margin-top: 10px;
}
</style>
